<template>
    <div class="mapBox">
        <div class="dropdown" >
            <el-dropdown  @command="command">
                <el-button size="mini">
                  切换地图
                </el-button>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="BMAP_NORMAL_MAP">标准地图</el-dropdown-item>
                  <el-dropdown-item command="BMAP_EARTH_MAP">地球模式</el-dropdown-item>
                  <el-dropdown-item command="BMAP_SATELLITE_MAP">普通卫星地图</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>
        <div id="container"></div> 
    </div>
</template>

<script>
export default {
    name:'map',
    data(){
        return {
            map:null
        }
    },
    mounted(){
        this.init()
    },
    methods:{
        // 初始化地图
        init(){
            this.map = new BMapGL.Map("container",{
                // 禁止地图旋转和倾斜
                // enableRotate: false,
                // enableTilt: false
            });
            var point = new BMapGL.Point(116.404, 39.915);
            console.log(point)
            this.map.enableScrollWheelZoom(true);  // 开启缩放
            this.map.setHeading(64.5);   //设置默认旋转角度
            this.map.setTilt(73);       //设置默认倾斜角度
            this.map.centerAndZoom({
                lat: 39.915,
                lng: 116.404
            }, 15);  //定位 缩放大小值越小越高
            this.map.setMapType(BMAP_SATELLITE_MAP); 
            var cityCtrl = new BMapGL.CityListControl();  // 添加城市列表控件
            var scaleCtrl = new BMapGL.ScaleControl();  // 添加比例尺控件
            var zoomCtrl = new BMapGL.ZoomControl();  // 添加缩放控件
            this.map.addControl(cityCtrl);
            this.map.addControl(scaleCtrl);
            this.map.addControl(zoomCtrl);
            var point = new BMapGL.Point(116.404, 39.915);   
            var myIcon = new BMapGL.Icon("https://photo.16pic.com/00/89/52/16pic_8952326_b.jpg", new BMapGL.Size(23, 25), {   
                // 指定定位位置。  
                // 当标注显示在地图上时，其所指向的地理位置距离图标左上   
                // 角各偏移10像素和25像素。您可以看到在本例中该位置即是  
                // 图标中央下端的尖角位置。   
                anchor: new BMapGL.Size(10, 25),   
                // 设置图片偏移。  
                // 当您需要从一幅较大的图片中截取某部分作为标注图标时，您  
                // 需要指定大图的偏移位置，此做法与css sprites技术类似。   
                imageOffset: new BMapGL.Size(0, 0 - 25)   // 设置图片偏移   
            });     
            var marker = new BMapGL.Marker(point);        // 创建标注   
            this.map.addOverlay(marker);                     // 将标注添加到地图中
            this.map.addEventListener("click", (val)=>{   
              // console.log("您点击了标注",val);   
              let point = new BMapGL.Point(val.latlng.lng, val.latlng.lat);   
              let marker = new BMapGL.Marker(point);        // 创建标注   
              this.map.addOverlay(marker);                     // 将标注添加到地图中
            });

        },
        command(val,val1){
            if(val == 'BMAP_NORMAL_MAP'){
                this.map.setMapType(BMAP_NORMAL_MAP); 
            }else if(val == 'BMAP_EARTH_MAP'){
                this.map.setMapType(BMAP_EARTH_MAP); 
            }else{
                this.map.setMapType(BMAP_SATELLITE_MAP); 
            }
        }
    }

}

</script>

<style scoped lang="less">
.mapBox{
    width: 100%;
    height: 100%;
    position: relative;
    #container{
        width: 100%;
        height: 100%;
    }
    .dropdown{
        position: absolute;
        top: 10px;
        left: 100px;
        z-index: 100;
        &/deep/ .el-button{
            padding: 9px 10px;
        }
    }
}



</style>